import Carousel from './components/Carousel';
import './App.css';
import gl1 from './1.jpg';
import gl2 from './2.jpg';
import gl3 from './3.jpg';
import gl4 from './4.jpg';
import gl5 from './5.jpg';

function App() {
  const style = {
    width: 200,
    height: 350,
    margin: '0 auto'
  }
  return (
    <div className="App">
     <Carousel height={style.height} width={400} loop={false}>
       <Carousel.Item>
         <div style={style}>
           <img alt='gl' src={gl1} style={style} />
         </div>
       </Carousel.Item>
       <Carousel.Item>
         <div style={style}>
           <img alt='gl' src={gl2} style={style} />
         </div>
       </Carousel.Item>
       <Carousel.Item>
         <div style={style}>
           <img alt='gl' src={gl3} style={style} />
         </div>
       </Carousel.Item>
       <Carousel.Item>
         <div style={style}>
           <img alt='gl' src={gl4} style={style} />
         </div>
       </Carousel.Item>
       <Carousel.Item>
         <div style={style}>
           <img alt='gl' src={gl5} style={style} />
         </div>
       </Carousel.Item>
     </Carousel>
    </div>
  );
}

export default App;
